<template>
    <div>
        <el-card shadow="never">
            <template #header>
                <div class="card-header">
                    <span>轮播管理</span>
                </div>
                <div>
                    <el-row :gutter="10">
                        <el-col :span="12">
                            <el-card shadow="never">
                                <template #header>
                                    <div>
                                        操作
                                    </div>
                                </template>
                                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px"
                                    class="demo-ruleForm" status-icon>
                                    <el-form-item label="标题" prop="title">
                                        <el-input v-model="ruleForm.title" />
                                    </el-form-item>
                                    <el-form-item label="图片" prop="image">
                                        <hd-uploadSingleImage v-model="ruleForm.image"></hd-uploadSingleImage>
                                        <el-alert title="长宽比为750 × 273" type="info" show-icon />
                                    </el-form-item>
                                    <el-form-item label="跳转链接(商家id)" prop="link">
                                        <el-input v-model="ruleForm.link"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="onSubmit(ruleFormRef)">提交保存</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-card>

                            <el-table :data="swipers" style="width: 100%">
                                <el-table-column prop="id" label="id" width="100" />
                                <el-table-column prop="title" label="标题" width="180" />
                                <el-table-column prop="link" label="跳转路径" width="80">
                                </el-table-column>
                                <el-table-column prop="image" label="图片">
                                    <template #default="{ row }">
                                        <el-image style="width: auto; height:48px" :src="row.image" fit="contain" />
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="220">
                                    <template #default="{ row }">
                                        <el-button type="primary" @click="edit(row)">编辑</el-button>
                                        <el-button type="danger" @click="del(row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>

                        </el-col>
                        <el-col :span="12">
                            <el-card shadow="never">
                                <template #header>
                                    <div>
                                        预览
                                    </div>
                                </template>
                                <el-carousel height="400px" type="card">
                                    <el-carousel-item v-for="(item, index) in swipers" :key="index">
                                        <el-image :src="item.image" style="width:100%;" fit="cover"></el-image>
                                        <span>{{ item.title }}</span>
                                    </el-carousel-item>
                                </el-carousel>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-dialog v-model="dialogVisible" title="修改" width="30%">
                        <el-form ref="editFormRef" :model="editForm" :rules="rules" label-width="120px"
                            class="demo-ruleForm" status-icon>
                            <el-form-item label="标题" prop="title">
                                <el-input v-model="editForm.title" />
                            </el-form-item>
                            <el-form-item label="图片" prop="image">
                                <hd-uploadSingleImage v-model="editForm.image"></hd-uploadSingleImage>
                                <el-alert title="长宽比为800*400" type="info" show-icon />
                            </el-form-item>
                            <el-form-item label="跳转链接(商家id)" prop="link">
                                <el-input v-model="editForm.link"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onUpdate(editFormRef)">提交保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                </div>
            </template>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { http } from '@/plugins/axios/index.ts'
const swipers = ref([])
const getSwipers = async () => {
    swipers.value = await http.request({
        url: `/swiper`,
        method: "GET",
    })
}
onMounted(() => {
    getSwipers()
})


const ruleForm = reactive({
    title: '',
    image: '',
    link: ''
})
const editForm = reactive({
    id: "",
    title: '',
    image: '',
    link: ''
})
const ruleFormRef = ref()
const editFormRef = ref()
const del = async (row) => {
    await http.request({
        method: "delete",
        url: `/swiper/${row.id}`
    })
    await getSwipers()
}
const rules = ref({
    image: [
        { required: true, message: '请上传图片', trigger: 'blur' },
    ],
    title: [
        {
            required: true,
            message: '请输入标题',
            trigger: 'change',
        },
        { min: 3, message: '标题大于3个字符', trigger: 'blur' },
    ],
    link: [
        {
            required: true,
            message: '小程序跳转链接地址',
            trigger: 'change',
        },
    ],
})
const dialogVisible = ref(false)
const edit = async (row) => {
    editForm.id = row.id;
    editForm.title = row.title;
    editForm.image = row.image;
    editForm.link = row.link;

    dialogVisible.value = true
}
const onSubmit = async (formEl) => {
    // 验证
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            console.log('submit!')
            await http.request({
                url: `/swiper`,
                method: "POST",
                data: ruleForm
            })
            // 清空
            ruleFormRef.value.resetFields()
            await getSwipers()
        } else {
            console.log('error submit!', fields)
        }
    })

}

const onUpdate = async (formEl) => {
    // 验证
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            console.log('submit!')
            await http.request({
                url: `/swiper/${editForm.id}`,
                method: "PUT",
                data: editForm
            })
            // 清空
            ruleFormRef.value.resetFields()
            dialogVisible.value = false
            await getSwipers()
        } else {
            console.log('error submit!', fields)
        }
    })
}
</script>

<style scoped></style>